/<template>
  <div>
      <header>
        <span>返回</span>
        <input type="text" v-model="keyWord" @input="searchList">
        <span>搜索</span>
      </header>
      <h2>搜索结果</h2>
      <ul>
        <li v-for="item in newArr" :key="item.id">{{item.name}}</li>
      </ul>
  </div>
</template>

<script>
//src外使用require
//src内使用import
import axios from "axios";
export default {
  data()
  {
    return{
      keyWord:"",//关键字
      data:[],//全部数据
      newArr:[],//搜索后的新数据
      timer:null//节流函数延时器
    }
  },
  //渲染完成后，发起请求
  mounted()
  {
    axios.get("/list").then((res) => {
      console.log(res.data);
      this.data=res.data;
    })
  },
  methods:{
    //搜索函数
    searchList()
    //关键字非空判断
    { console.log(this.keyWord)

      if(this.keyWord)
      {
        clearTimeout(this.timer);
        //后定义
        this.timer=setTimeout(() => {
         //数据查询
          this.newArr=this.data.filter((item) => {
            return item.name.includes(this.keyWord);
          })
        }, 500)
      }
      else
      {
        this.newArr=[]
      }
    }
  },
  //组件销毁之前
  destroyed()
  {
    //把延时器清除
    clearTimeout(this.timer);
  }
}
</script>

<style>

</style>